﻿<div>
    @if (datas.Count > 0)
    {
        <AntList DataSource="datas" TItem="Data" Header="@header">
            <ListItem>
                <Comment Avatar="context.Avatar" Author="context.Author" Datetime="context.Datetime" Content="context.Content"></Comment>
            </ListItem>
        </AntList>
    }
    <Comment Avatar="@(@"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png")">
        <ContentTemplate>
            @GetEditor(@onSubmit)
        </ContentTemplate>
</Comment>
</div>


@code{
    List<Data> datas=new List<Data>();
    RenderFragment replyAction =@<span>Reply to</span>;

    RenderFragment header =>
        @<div>
            @if (datas.Any())
            {
                <span>
                    @($"{datas.Count} {(datas.Count > 1 ? "replies" : "reply")}")
                </span>
            }
        </div>;

    async void onSubmit()
    {
        submitting = true;

        await Task.Delay(1000);
        this.datas.Add(new Data()
        {
            Author = "Han Solo",
            Avatar = @"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
            Content = _value,
            Datetime = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"),
        });
        submitting = false;
        _value = "";
        await InvokeAsync(StateHasChanged);
    }

    bool submitting=false;
    string _value = "";

    //TODO::Form
    RenderFragment GetEditor(Action onSubmit)
    {
        return
            @<div>
                <TextArea MinRows="4" @bind-Value="@_value" />
                <br/>
                <br/>
                <Button Loading="@submitting" OnClick="onSubmit " type="primary">
                    Add Comment
                </Button>
            </div>;
    }


    class Data
    {
        public string Author { get; set; }
        public string Avatar { get; set; }
        public string Content { get; set; }
        public string Datetime;
    }
}